<template>
    <div class="example">
        <p>Original messsage: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>{{ count }}</p>
        <p>{{ result }}</p>
        <div>
            <button v-on:click="add">增加</button>
            <button v-if="isShow" v-on:click="minutes">减少</button>
        </div>
        <div>
            <input v-model="input" />
            <button v-on:click="addStore(input)">增加字段</button>
        </div>
    </div>
</template>
<script>

import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    data () {
        return {
            message: 'Hello',
            input: ''
        }
    },
    computed: {
        reversedMessage(){
            return this.message.split('').reverse().join('');
        },
        ...mapState({
            count: state => state.data.count
        }),
        ...mapGetters('test', ['result', 'isShow'])
    },
    methods: {
        addStore(value){
            this.$store.dispatch('test/add', value);
            this.input = '';
        },
        ...mapActions('data', ['add', 'minutes'])
    }
}
</script>
<style scoped>
</style>